{% extends "layout.html" %}
{% block content %}
<div class="container mt-5">
    <h1 class="text-center mb-4">欢迎, {{ current_user.username }}</h1>
    <p class="text-center lead">探索即时问答和互动聊天功能。</p>
    <!-- 动态显示文本的容器，仅在有内容时显示 -->
    {% if response_text %}
    <div id="dynamicResponseText" class="text-success mt-3 mb-5 text-center"></div>
    {% endif %}
    <form id="askForm" action="{{ url_for('public.ask') }}" method="post" role="form" class="text-center">
        {{ form.hidden_tag() }}
        <div class="form-group">
            {{ form.askbox(class="form-control-lg w-75 mx-auto", placeholder="输入您的问题...", id="askbox") }}
        </div>
        <div>
            {{ form.submit(class="btn btn-primary btn-lg") }}
            <button type="button" id="stopButton" class="btn btn-danger btn-lg ml-2">停止</button> <!-- 增加了停止按钮 -->
        </div>
    </form>
</div>
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        // 页面加载完成后清空输入框
        document.getElementById('askbox').value = '';
    });

    let shouldStop = false; // 控制是否停止输出的标志变量
    let responseText = `{{ response_text|safe }}`;
    if (responseText && responseText !== 'None') {
        let container = document.getElementById('dynamicResponseText');
        let index = 0;
        function showText() {
            if (index < responseText.length && !shouldStop) {
                container.innerHTML += responseText.charAt(index);
                index++;
                setTimeout(showText, 100);
            }
        }
        showText();
    }

    document.getElementById('stopButton').addEventListener('click', () => {
        shouldStop = true; // 用户点击停止按钮时设置标志变量为true
    });
</script>
{% endblock %}
